<template>
  <div>
    <!-- 下单成功支付框 -->
    <PayBox ref="payBox" :noBackBtn="true"/>
    <BaseTop ref="baseTop" :type="type" />
    
    <Common ref="common" />

    <Card class="marginB10">
      <div class="overflowH f_14 TJ_big">
        <div class="TJ_title f_bold f_16">
          申请材料
          <span class="cRed">*</span>
        </div>
        <div class="TJ_box borderNone">
          <div class="cRed marginB20">(可将正确命名的图片全选拖拽至上传位置，或长按ctrl全选图片)</div>
          <div class=" marginB20">
            <div>
              <div class="pullLeft textCenter padding10">
                <div class="JC_img tran3 pointer textCenter cBlue  relative marginR20 marginB10">
                  <input
                    type="file" ref="imgD"
                    class="InputFileBox"
                    accept="image/*"
                    multiple 
                    @change="btnBWT($event)"
                  />
                  <Icon
                    type="ios-add-circle-outline"
                    class="marginB5"
                    size="30"
                    style="padding:20px 0 5px 0;"
                  />
                  <div class="f_12">多图片上传</div>
                  <div class="">格式：jpg</div>
                </div>
                <div class="JC_img tran3 pointer textCenter  borderNone heightAuto bgTran marginB10">外观设计图片</div>
                <Button
                  type="primary"
                  ghost
                  @click="$app.openWindow('static/word/外观设计图片.doc')"
                  size="small"
                  class="marginR20 marginB10 "
                >文件说明</Button>
                <div class="clearfix"></div>
                <Button
                  type="error"
                  ghost
                  @click="$store.commit('upData_WGZL_size')"
                  size="small"
                  class="marginR20 "
                >图片尺寸</Button>
              </div>
              
              <div class="overflowH padding10">
                <!-- 图片循环 -->
                <div class="JC_img borderNone pointer relative pullLeft marginR20 marginB20" v-for="(val,i) in appe_img_list" :key="i" style="height:135px;">
                  <img :src="val.file_url" class="contain bgWhite  width100" @click="$app.openWindow(val.file_url)" style="height:120px;border:1px solid #eee;">
                  <Icon type="ios-close-circle" class="absolute cCCC" style="top:-10px;z-index:4;right:-10px;" size="22" @click="appe_img_list=$app.arrayDelOne(appe_img_list,i)"/>
                  <div class="marginT5 textCenter txtOneLine">{{$app.urlToName(val)}}</div>
                </div>
              </div>
              <div class="clearfix"></div>
            </div>
            <div class="clearfix"></div>
          </div>
          <div class="overflowH " style="border-top:1px solid #eee; padding:30px 10px;">
            <div class=" overflowH">
              <div class="JC_img tran3 pointer textCenter cBlue pullLeft relative marginR20" style="height:100px">
                <input
                  type="file" ref="wj"
                  accept=".docx,.doc"
                  class="InputFileBox"
                  @change="one_up($event)"
                />
                <Icon
                  type="ios-add-circle-outline"
                  class="marginB5"
                  style="padding-top:33px;"
                  size="30"
                  v-show="!appe_brief_desc_path.file_url"
                />
                <div class="relative" v-show="appe_brief_desc_path.file_url">
                  <i class="iconfont f_40 inlineBlock marginT10" :class="$app.judgeData(appe_brief_desc_path) && $app.fileIcon(appe_brief_desc_path)"></i>
                  <div class="f_12 cCCC ">重新上传</div>
                </div>
              </div>
              <div class=" overflowH">
                <div style="margin:5px 0 10px 0;">
                  <span 
                    :class="(!!appe_brief_desc_path.file_url) && ' underline textLine'"
                    @click="$app.judgeData(appe_brief_desc_path.file_url) && $app.openWindow(appe_brief_desc_path.file_url)"
                  >
                    <Icon type="ios-search" size="20" class="cCCC marginR5" v-show="!!appe_brief_desc_path.file_url"/>
                    外观简要说明书
                  </span>
                </div>
                <Button
                  type="primary"
                  ghost
                  @click="$app.openWindow('static/word/外观设计简要说明.doc')"
                  size="small"
                  class="marginB10"
                >文件说明</Button>
                <div class="cRed">格式：word</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="overflowH f_14 TJ_big">
        <div class="TJ_title f_bold f_16">
          默认选项
          <span class="cRed">*</span>
        </div>
        <div class="TJ_box">
          <div class="marginB20">
            <Checkbox size="large" class="paddingR10" v-model="is_cost_reduction">请求费减且已完成费减资格备案</Checkbox>
            <span class="cRed">(如果不办理费减备案则无需勾选)</span>
          </div>
        </div>
      </div>
    </Card>

    <!-- 0实用新型、1外观设计、2发明 -->
    <Other :type="1" ref="other" />
    
    <template v-if="$app.judgeData(order_id)">
      <Button type="primary" size="large" class="marginR10" ghost @click="backOrSee">
        <Icon type="md-arrow-round-back" size="18" class="relative"  />
        返回
      </Button>
    </template>
    <Button type="primary" size="large" @click="bigGo">{{$app.judgeData(order_id)?'确认修改':'确认信息无误后-提交'}}</Button>

    
  </div>
</template>



<script>
import PayBox from "@$@/_service/payBox";
import BaseTop from "@$@/_service/baseTop";
import Common from "@$@/_service/common";
import Other from "@$@/_service/other";
import info_edit_do from "@$@/js/$common/info_edit_do";
import zL_do from "@$@/js/$common/zL_do";
export default {
  name: "baseWGZL",
  components: { BaseTop, Common, Other,PayBox },
  data() {
    let {
      $route: {
        query: {
          type,order_id
        }
      }
    } = this;

    let data = { 
      type,order_id,
      orderInfo:{}//专利详情 修改订单时用
    };

    let tool = {
      is_cost_reduction: true, //费减资格
      same_day: false, //同日申请
      is_early_release: true, //是否提前发布
      abstract_image_index: '', //第几张图
      claims_item_count:'',//项数

      //专利文件 - 五书合一 这个字段只存 file_path
      patent_file_path: "",

      //5书 呵呵 巨多 巨难搞 巨烦
      five_books: {
        instruction_path: {
          file_path: "",
          file_url: "" //说明书
        },
        instruction_abstract_path: {
          file_path: "",
          file_url: "" //说明书摘要
        },
        claims_path: {
          file_path: "",
          file_url: "" //权利要求书
        },
        instruction_image_path: {
          file_path: "",
          file_url: "" //说明书附图
        },
        abstract_image_path: {
          file_path: "",
          file_url: "" //摘要附图
        }
      },
      appe_img_list: [], //外观图片列表
      appe_brief_desc_path: "", //外观设计简要说明

    };
    return Object.assign(data, tool);
  },
  created(){
    let {
      order_id
    }=this;
    if($app.judgeData(order_id)){
      //专利详情
      $ajax.itwPT(order_id,resData=>{
        this.orderInfo=resData;
        //全局赋值
        info_edit_do.patentTim(this);
      });
    }
  },
  mounted() {},
  methods: {
    //多图片上传
    btnBWT(e){

      // 外观专利图片上传 专用=>多种判断合一
      $app.WGZL_EachImg_judge(e,(resData, file_name) => {
        this.appe_img_list=[...this.appe_img_list,resData];
        this.$refs['imgD'].value='';
      });

    },
    //外观简要说明书 上传
    one_up(e){
      let file = e.target.files[0];//选中的文件

      //格式判断
      $app.suffix.word(e,file,false,()=>{
        $ajax.upOther(file,5,resData=>{
          this.appe_brief_desc_path=resData;
          this.$refs['wj'].value='';
        },()=>{
          this.$refs['wj'].value='';
        });
      });

    },
    bigGo() {
      let that=this;
      //1发明专利,2实用新型,3外观专利
      zL_do.patentDoSub(3,that);
    },
    backOrSee(){
      $app.backOrSee();
    }
  }
};
</script>

